<template>
	<view class="content" style="padding-bottom: 100rpx">
		<view class="toop">
			<!-- 轮播图 -->
			<view class="toop_a">
				<view class="wrap">
					<u-swiper :list="list"></u-swiper>
				</view>
			</view>
		</view>
		<view class="tishi" v-if="falg">
			
			<!-- <p class="tishi_a "> -->
				<u-notice-bar mode="horizontal" :list="list2" style='width: 690rpx;'></u-notice-bar>
				
			<!-- </p> -->
		</view>

		<view class="erji" style="margin-top: 20rpx">
			<view class="erji_a" @click="lPic(1)">
				<image src="../../static/homepage_a.png" mode=""></image>
				<p>新手引导</p>
			</view>
			<view class="erji_a" @click="lPic(2)">
				<image src="../../static/homepage_b.png" mode=""></image>
				<p>推广教程</p>
			</view>
			<view class="erji_a" @click="lPic(3)">
				<image src="../../static/homepage_c.png" mode=""></image>
				<p>最新活动</p>
			</view>
			<view class="erji_a" @click="lPic(4)">
				<image src="../../static/homepage_d.png" mode=""></image>
				<p>常见问题</p>
			</view>
		</view>
		<!-- 二级报航 -->
		<view class="er_dao">
			<view :class="erji == 1 ? 'er_dao_b' : 'er_dao_a'" @click="daohang_a">综合</view>
			<view :class="erji == 2 ? 'er_dao_b' : 'er_dao_a'" @click="daohang_b">推荐</view>
			<view :class="erji == 3 ? 'er_dao_b' : 'er_dao_a'" @click="daohang_c">最新</view>
			<view :class="erji == 4 ? 'er_dao_b' : 'er_dao_a'" @click="daohang_d">价格</view>
			<view :class="erji == 5 ? 'er_dao_b' : 'er_dao_a'" @click="daohang_e">人气</view>
		</view>
		<view class="shuju">
			<view class="shuju_a" v-for="(i, index) in data" :key="index" @click="xq(i.id)">
				<view class="shuju_a_top">
					<view class="shuju_a_top_a">
						<p>{{ i.title }}</p>
						<span>赏{{ i.commission }}元</span>
					</view>
				</view>
				<view class="shuju_a_cen">
					<view class="shuju_a_cen_a">{{ i.brief }}</view>
					<span>立即赚钱</span>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			list2:['使用平台过程中遇到任何问题，可在我的-意见反馈中，告诉平台。'],
			falg: false,
			status: "nomore",
			data: [],
			erji: 1,
			list: [],
			marqueeList: {},
			page: 1,
			limit: 10,
			nickname: "",
			money: "",
			total: "",
			type: 0,
			uid: "",
		};
	},
	onLoad() {
		this.getCarousel();
		this.marquee();
		this.hallLst();
		this.marquee();
		uni.setNavigationBarColor({
			frontColor: "#ffffff",
			backgroundColor: "#FA341B",
			animation: {
				duration: 400,
				timingFunc: "easeIn",
			},
		});
	},
	methods: {
		lPic(id) {
			uni.navigateTo({
				url: "./Home/lPic?id=" + id,
			});
		},

		async getCarousel() {
			let obj = {
				// uid: uni.getStorageSync("uid"),
			};
			const res = await this.$u.post("api/task/slideshow", obj, {});
			// if (!res.code) uni.$showMsg();
			this.list = res.data;
		},
		async marquee() {
			let obj = {
				//uid: uni.getStorageSync("uid"),
			};
			const res = await this.$u.post("api/task/marquee", obj, {});
			//if (!res.code) uni.$showMsg();

			console.log("res.data[0]: ", res.data[0]);
			if (res.data[0]) {
				console.log("res.data[0]:", res.data[0]);
				this.falg = true;
				this.nickname = res.data[0].nickname;
			}
			if (res.data[0]) {
				console.log("res.data[0]:", res.data[0]);
				this.falg = true;
				this.money = res.data[0].money;
			}
		},
		async hallLst() {
			let obj = {
				uid: uni.getStorageSync("uid"),
				type: this.type,
				page: this.page,
				limit: this.limit,
			};
			const res = await this.$u.post("api/task/task_index", obj, {});
			// if (!res.code)  uni.$showMsg();
			this.data = [...this.data, ...res.data];
			this.page++;
			this.total = res.total;
		},
		daohang_a() {
			(this.data = []), (this.page = 1), (this.limit = 10), (this.type = 0), (this.erji = 1), this.hallLst();
		},
		daohang_b() {
			this.data = [];
			(this.page = 1), (this.limit = 10), (this.type = 1), (this.erji = 2), this.hallLst();
		},
		daohang_c() {
			this.data = [];
			(this.page = 1), (this.limit = 10), (this.type = 2), (this.erji = 3), this.hallLst();
		},
		daohang_d() {
			(this.data = []), (this.page = 1), (this.limit = 10), (this.type = 3), (this.erji = 4), this.hallLst();
		},
		daohang_e() {
			this.data = [];
			(this.page = 1), (this.limit = 10), (this.type = 4), (this.erji = 5), this.hallLst();
		},
		xq(id) {
			wx.navigateTo({
				url: "./Home/xiangqing?tid=" + id + "&id=" + 0,
			});
		},
	},

	onReachBottom() {
		if (this.data.length >= this.total) {
			this.status = "noMore";
		} else {
			this.status = "loading";
			this.hallLst();
		}
	},
};
</script>

<style lang="scss">
.content {
	width: 100%;
	height: 100%;
	background-color: #f6f6f6;
	padding-top: 30rpx;
}

uni-swiper {
	height: 150rpx !important;
}

.toopp {
	width: 690rpx;
	height: 70rpx;
	margin: auto;
	display: flex;
	justify-content: space-around;

	.toopp_a {
		width: 624rpx;
		height: 60rpx;
		background-color: #ffa3a1;
		padding-top: 5rpx;
		border-radius: 50rpx;
		display: flex;

		image {
			width: 27rpx;
			height: 27rpx;
			margin-left: 25rpx;
			margin-top: 18rpx;
		}

		input {
			width: 524rpx;
			font-size: 24rpx;
			margin-left: 20rpx;
			color: #ffffff;
			margin-top: 7rpx;
		}
	}

	.toopp_b {
		width: 47rpx;
		height: 70rpx;

		image {
			width: 41rpx;
			height: 38rpx;
			margin-left: 5rpx;
		}

		p {
			width: 47rpx;
			height: 23rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			line-height: 20rpx;
		}
	}
}

.toop {
	width: 100%;
	border-radius: 0 0% 30% 30%;

	.toop_a {
		width: 690rpx;
		margin: auto;
		border-radius: 10rpx 10rpx 10rpx 10rpx;

		.wrap {
			width: 690rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
		}
	}
}

.tishi {
	width: 690rpx;
	margin: auto;
	height: 60rpx;
	
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	

	image {
		width: 35rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}

	.tishi_a {
		// width: 600rpx;
		// overflow: hidden;
		height: 60rpx;
		font-size: 26rpx;
		line-height: 60rpx;
		color: #404040;
		opacity: 1;

		span {
			font-size: 26rpx;
			color: #fa341b;
		}
	}
}

.erji {
	width: 690rpx;
	margin: auto;
	margin-top: 20rpx;
	background-color: #ffffff;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 15rpx;

	.erji_a {
		width: 120rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 50rpx;
			height: 56rpx;
		}
	}
}

.er_dao {
	// width: 690rpx;
	// margin: auto;
	height: 68rpx;
	background-color: #ffffff;
	border-bottom: 1rpx solid #f5f5f5;
	margin-top: 20rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;

	.er_dao_a {
		width: 100rpx;
		height: 68rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 68rpx;
		color: #666666;
		opacity: 1;
		text-align: center;
	}

	.er_dao_b {
		width: 100rpx;
		height: 68rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 68rpx;
		color: #fa341b;
		opacity: 1;
		text-align: center;
		border-bottom: 5rpx solid #fa341b;
	}
}

.shuju {
	// width: 690rpx;
	// margin: auto;
	height: 100%;
	background-color: #ffffff;
	margin-bottom: 50rpx;

	.shuju_a {
		width: 690rpx;
		margin: auto;
		background-color: #ffffff;
		border-bottom: 1rpx solid #f5f5f5;

		.shuju_a_top {
			width: 650rpx;
			height: 50rpx;
			margin: auto;
			padding-top: 10rpx;
			display: flex;
			justify-content: space-between;

			.shuju_a_top_a {
				width: 100%;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				p {
					width: 360rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-weight: bold;
					color: #333333;
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				span {
					display: block;
					height: 40rpx;
					line-height: 40rpx;
					color: #fe3548;
					font-size: 18rpx;
					margin-left: 10rpx;
				}
			}
		}

		.shuju_a_center {
			width: 650rpx;
			margin: auto;
			height: 50rpx;
			line-height: 50rpx;
			padding-top: 10rpx;
			display: flex;
			font-size: 24rpx;
		}

		.shuju_a_cen {
			width: 650rpx;
			padding: 20rpx 0;
			margin: auto;
			display: flex;
			justify-content: space-between;

			.shuju_a_cen_a {
				width: 480rpx;
				height: 50rpx;
				line-height: 60rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #666666;
				font-size: 24rpx;
			}

			span {
				padding: 9rpx 12rpx;
				color: #fff;
				background-color: #fa341b;
				border-radius: 10rpx;
				font-size: 24rpx;
			}

			.shuju_a_cen_b {
				width: 140rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				margin-top: 10rpx;
				font-size: 24rpx;
				background-color: #fa341b;
				border-radius: 10rpx;
				color: #ffffff;
			}
		}
	}
}

.u-line-1.u-more-text {
	color: #fff !important;
}
</style>
